import * as echarts from "echarts";

export function OptionFun(echartData: any) {
    // 组合渲染数据
    let seriesData: any = [];
    echartData.data.forEach((item: any, index: any) => {
        seriesData.push(
            {
                name: item.name,
                type: 'bar',
                itemStyle: {
                    borderRadius: [4, 24, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(' + echartData.colorList[index] + ', 1)' },
                        { offset: 1, color: 'rgba(' + echartData.colorList[index] + ', 0.1)' }
                    ])
                },
                barWidth: 10,
                data: item.data
            }
        )
    })
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: echartData.legendShow ? '20%' : '10%', // 控制图表填充位置，有legend时，需预留legend位置
            left: '5%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        legend: {
            show: echartData.legendShow,
            top: '5%',
            left: 'center',
            type: 'scroll',
            selectedMode: echartData.legendSingle ? "single" : 'multiple',  // single --- 单选 / multiple --- 多选 (可传参控制)
            inactiveColor: "#CBCBCB",
            pageIconColor: '#4AFFFF',
            pageTextStyle: {
                color: '#fff'
            },
            textStyle: {
                color: '#fff'
            },
            itemGap: 10
        },
        xAxis: [
            {
                // name: '(年份)', 
                type: 'category',
                data: echartData.XData,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7D7D7D'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'blue',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    color: '#fff'
                },
                nameTextStyle: {
                    color: '#FFF',
                    padding: [50, 0, 0, -30]
                }
            }
        ],
        yAxis: {
            name: '(万人)',
            type: 'value',
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#7D7D7D',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#7D7D7D',
                    width: 1,
                    type: 'dashed'
                }
            },
            nameTextStyle: {
                color: '#FFF'
            }
        },
        series: seriesData
    }
    return option;
}
